<%--
  Created by IntelliJ IDEA.
  User: Cedar
  Date: 2019/11/29
  Time: 21:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ include file="heder.jsp" %>

<html>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<style>

    .headImage {
        width: 50px;
        height: 50px;
        margin-left: 5px;
        vertical-align: middle;
    }

    .userInfo form div {
        float: left;
        height: 50px;
        text-align: center;
        line-height: 50px;
    }

    .userInfo button {
        margin-top: 33%;
    }

    .userInfo {
        margin: 10px auto;
        height: 50px;
    }

    .read {
        border: none;
        width: 50px;
    }

    input {
        outline: none;
        width: 200px;
        padding-left: 5px;
        margin: 0 10px;
    }

    .noteList {
        float: none;
        width: 100%;
        margin-top: 100px;
    }

    table {
        margin-top: 20px;
    }

    td {
        max-width: 500px;
        text-align: center;
        word-break: break-all;
        height: 50px;
    }

    .page span {
        margin: 0 30px;
    }

</style>
<head>
    <title>用户信息</title>
</head>
<body>
<div class="userInfo">
    <div>
        <span style="font-weight: bold;font-size: 30px">用户信息</span>
    </div>
    <form name="updateUser" action="user/update" method="post" enctype="multipart/form-data">
        <div class="userInfo">
            <div>
                <label>ID:</label><input name="id" class="read" readonly value="${sessionScope.loginUser.id}"/>
            </div>
            <div>
                <label>用户名:</label> <input name="userName" value="${sessionScope.loginUser.name}"/>
            </div>
            <div>
                <label>头像:</label><img class="headImage" src="<%=basePath%>${sessionScope.loginUser.headImg} ">
                <input type="file" name="headImg"/>
            </div>
            <div>
                <label>修改密码:</label><input type="text" name="password"/>
            </div>
            <div>
                <button type="submit" name="submit">修改</button>
            </div>
        </div>

    </form>
</div>
<div class="noteList">
    <div>
        <span style="font-weight: bold;font-size: 30px">笔记列表</span>
        <span><a href="note.jsp">新增</a></span>
        <span><a href="note/downExcel?id=${sessionScope.loginUser.id}">导出</a></span>
    </div>
    <table class="table" id='table' cellspacing="0" border>
        <tr>
            <th width="50px">ID</th>
            <th width="100px">标题</th>
            <th width="550px">内容</th>
            <th width="100px">创建时间</th>
            <th width="100px">修改时间</th>
            <th width="100px">操作</th>
        </tr>
    </table>
    <div class="page">
        <span class="pre"><a href="javascript:void(0);">上一页</a></span>
        <span class="next"><a href="javascript:void(0);">下一页</a></span>
        <span>总共<label id="totalPage">0</label>页</span>
        <span>第<label id="pageNum">0</label>页</span>
        <span>共<label id="total">0</label>条数据</span>
    </div>
</div>

</body>

<script>

    var currentPageNum = 1;
    var totalPage;
    $(function () {
        getNoteDate(1);

        $(".next a").click(function () {
            if (totalPage <= currentPageNum) {
                return false;
            }
            getNoteDate(currentPageNum + 1);
        });

        $(".pre a").click(function () {
            if (currentPageNum <= 1) {
                return false;
            }
            getNoteDate(currentPageNum - 1);
        });

        function getNoteDate(pageNum) {
            $.get("note/queryByUserId", {"id":${sessionScope.loginUser.id}, "pageNum": pageNum}, function (data) {
                totalPage = data.totalPage;
                var pageNum = data.pageNum;
                var pageSize = data.pageSize;
                var total = data.total;
                currentPageNum = pageNum;

                $('#totalPage').html(totalPage);
                $('#pageNum').html(pageNum);
                $('#total').html(total);
                $("#table tr").not(':eq(0)').empty();

                $.each(data.data, function (index, item) {
                    var tr = '<td>' + item.id + '</td>'
                        + '<td>' + item.title + '</td>'
                        + '<td width="550px">' + item.content + '</td>'
                        + '<td>' + item.createDate + '</td>'
                        + '<td>' + item.updateDate + '</td>'
                        + '<td width="100px">'
                        + '<a href="note/deleteById?id=' + item.id + '">删除</a>'
                        + '/'
                        + '<a href="note/queryById?id=' + item.id + '">修改</a>'
                        + '</td>';

                    $("#table").append('<tr>' + tr + '</tr>')
                })
            }, "json");
        }
    })
</script>
</html>
